@import '../../../styles/constants';

.loading-wrapper {
  flex: 1;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;

  > :global(.loading) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    > .loading-circle {
      background-image: none;
      width: 40px;
      height: 40px;
      border-color: $sky-blue $sky-blue $sky-blue transparent;
      border-radius: 50%;
      border-style: solid;
      border-width: 2px;
      animation: rotate360 0.8s infinite linear;

      @keyframes rotate360 {
        100% {
          transform: rotate(360deg);
        }
      }
    }

    > .loading-text {
      font-size: 15px;
      margin-top: 13px;
    }
  }
}
